<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计时器</title>
</head>
<body>
    <h1 id="count">1</h1>
</body>
</html>
<script>
    /*
        
    */

    // 获取count
    var count = document.getElementById("count");

    // 使count 中的内容，自动切换
    /*
        js 的程序的执行速度是非常快的
            如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用
    */

    /*
        setInterval()
            - 定时调用
            - 可以将一个函数，每个一段时间执行一次
            - 参数：
                1.回调函数，该函数每个一段时间被调用一次
                2.每次调用间隔的时间，单位是毫秒
                setInterval(function(){alert("1秒出现一次")},1000);
            
            - 返回值：
                返回一个Number 类型的数据
                这个数字用来作为定时器的唯一标识
    */
    var num = 1;
    var timer = setInterval(function(){
        count.innerHTML = num++;
        if(num == 11){
            clearInterval(timer);
        }
    },200);
    /*
        clearInterval()
            - 可以用来关闭一个定时器
            - 方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
            - clearInterval(timer)
    */

    
    
</script>